<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字检测</title>
</head>
<body>
    <div style="width: 1000px; height: 800px; margin: auto; margin-top: 10px; border:solid #eea361 1px; border-radius: 10px;">
        <p style="width: 90%; height: 40px; line-height: 40px; margin: auto; border-bottom: solid #F0F0F0 1px;">
            请填写个人信息
        </p>
        <div style="width: 90%; height: 500px; margin: auto; margin-top: 10px;">
            <textarea id="content" style="width: 100%; height: 500px; line-height: 30px;" placeholder="请填写个人信息"></textarea>
        </div>
        <div style="width: 90%; height: 40px; margin: auto; margin-top: 10px; text-align: right">
            当前可以输入10字，已经输入了<label>0</label>个
        </div>

    </div>

</body>
</html>
<script src="./src/jquery-3.7.1.min.js"></script>
<script src="src/layer.js"></script>
<script>
    var js=setInterval(function (){
        var content=$("#content").val();
        if(content==null ||content==''){
            return false;
        }

    })

    $('#content').change(function (){
        var content=$(this).val();
        $.ajax({
            type:"post",
            url:"123.php",
            data:{content:content},
            timeout:3000,
            success:function (res){
                if(res>10){
                    //实化一个音乐
                    var mm=new Audio();
                    mm.src="./src/music.wav";
                    mm.play();
                    //
                    layer.msg('文字超过最大限制',{icon:2,time:3000});
                    //
                    $('#content').attr('disabled','disabled');
                    clearInterval(js);
                }else{
                    $('#a').html(10-(10-res));
                }
            },
            error:function (){
                alert("网络繁忙");
            }
        });
    })



</script>